<template>
  <div>
    <div class="top">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <div class="top-fl">
          <el-form-item label="">
            <el-select
              clearable
              v-model="formInline.homestatus"
              placeholder="入住状态"
              style="padding: 0px 0px 0px 10px"
              size="medium"
            >
              <el-option label="已入住" :value="1"></el-option>
              <el-option label="未入住" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-input
              size="medium"
              v-model="formInline.unitname"
              placeholder="单元名称"
              style=""
            ></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-input
              size="medium"
              v-model="formInline.buildnum"
              placeholder="幢号"
              style=""
            ></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-input
              size="medium"
              v-model="formInline.homenum"
              placeholder="房号"
              style=""
            ></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-input
              size="medium"
              v-model="formInline.homename"
              placeholder="住客姓名"
              style=""
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" size="medium"
              ><i class="el-icon-search"></i> 查询</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="derive" size="medium">
              <i class="el-icon-upload2"></i>批量导出</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="reset" size="medium">
              <i class="el-icon-delete"></i>批量删除</el-button
            >
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="min">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :border="true"
        stripe
        v-loading="loading"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column label="序号" width="80" align="center" type="index">
        </el-table-column>
        <el-table-column
          label="单元名称 "
          width="120"
          align="center"
          prop="unitname"
        >
          <!-- <template slot-scope="scope">{{ scope.row.communityname }}</template> -->
        </el-table-column>
        <el-table-column label="幢号" width="120" align="center">
          <template slot-scope="scope">{{
            scope.row.buildnum ? scope.row.buildnum : "暂无"
          }}</template>
        </el-table-column>
        <el-table-column label="楼层号" align="center" show-overflow-tooltip>
          <template slot-scope="scope">{{
            scope.row.storeynum ? scope.row.buildnum : "暂无"
          }}</template>
        </el-table-column>
        <el-table-column label="房号" align="center" show-overflow-tooltip>
          <template slot-scope="scope">{{
            scope.row.homenum ? scope.row.buildnum : "暂无"
          }}</template>
        </el-table-column>
        <el-table-column label="住客姓名" align="center" show-overflow-tooltip>
          <template slot-scope="scope">{{
            scope.row.homename ? scope.row.buildnum : "暂无"
          }}</template>
        </el-table-column>
        <el-table-column label="状态" align="center" show-overflow-tooltip>
          <template slot-scope="scope">{{
            scope.row.homestatus == 1 ? "已入住" : "未入住"
          }}</template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              plain
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              plain
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagebox">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pagesize"
          layout="sizes, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
  <script>
import moment from "moment";
import * as XLSX from "xlsx"; // 批量导出excel
export default {
  data() {
    return {
      exci: "",
      delids: [],
      loading: false,
      currentPage: 1, // 当前页码
      pagesize: 10, // 每页条数
      total: 0,
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
      value2: "",
      value3: "",
      formInline: {
        homestatus: "",
        unitname: "",
        buildnum: "",
        homenum: "",
        homename: "",
        token: sessionStorage.getItem("token"),
      },
      formInline2: {},
      tableData: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 搜索按钮
    onSubmit() {
      this.formInline2 = JSON.parse(JSON.stringify(this.formInline));
      this.onSubmit2();
    },
    async onSubmit2() {
      await this.$axios
        .get("/house/searchnumList", {
          params: {
            currPage: this.currentPage - 1,
            pageNum: this.pagesize,
            ...this.formInline2,
          },
        })
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data;
          this.total = res.data.total;
        });
    },
    // 批量删除
    reset() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await this.$axios
            .get("/house/delnumList", {
              params: {
                ids: this.delids.join(","),
                token: sessionStorage.getItem("token"),
              },
            })
            .then((res) => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getList();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 数据接口
    // 表格数据
    async getList() {
      this.loading = true;
      await this.$axios
        .get("/house/gethouseList", {
          params: {
            currPage: this.currentPage - 1,
            pageNum: this.pagesize,
          },
        })
        .then((res) => {
          console.log(res);
          this.loading = false;
          this.tableData = res.data.data;
          this.total = res.data.total;
        });
    },
    // 归档删除
    handleDelete(row, res) {
      // console.log(res.id);
      // console.log(sessionStorage.getItem('token'));
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await this.$axios
            .get("/house/delunitList", {
              params: {
                id: res.id,
                token: sessionStorage.getItem("token"),
              },
            })
            .then((res) => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getList();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async del(id) {
      console.log(id);
    },
    // 数据处理==================
    handleSizeChange(val) {
      //   console.log(`每页 ${val} 条`);
      this.pagesize = val;
      if (this.formInline2) {
        this.onSubmit2();
      } else {
        this.getList();
      }
    },
    handleCurrentChange(val) {
      //   console.log(`当前页: ${val}`);
      this.currentPage = val;
      if (this.formInline2) {
        this.onSubmit2();
      } else {
        this.getList();
      }
    },
    // 多选
    handleSelectionChange(val) {
      this.exci = val;
      for (let i = 0; i < val.length; i++) {
        this.delids[i] = val[i].id;
      }
      console.log(this.delids);
    },
    // 页面跳转
    //导出
    derive() {
      const tableData = this.exci; // 如果表格数据为空，提示用户

      if (tableData.length === 0) {
        this.$message({
          type: "warning",
          message: "没有数据可以导出！",
        });
        return;
      } // 定义表头

      const headers = [
        "单元名称",
        "幢号",
        "楼层号",
        "房号",
        "住客姓名",
        "状态",
      ]; // 将表格数据转换为工作表数据

      const worksheetData = [
        headers, // 第一行为表头
        ...tableData.map((item) => [
          item.unitname || "暂无", // 如果单元名称为空，填充为“暂无”
          item.buildnum || "暂无", // 如果幢号为空，填充为“暂无”
          item.storeynum || "暂无", // 如果楼层号为空，填充为“暂无”
          item.homenum || "暂无", // 如果房号为空，填充为“暂无”
          item.homename || "暂无", // 如果住客姓名为空，填充为“暂无”
          item.homestatus === 1
            ? "已入住"
            : item.homestatus === 2
            ? "未入住"
            : "暂无", // 转换状
        ]),
      ]; // 创建工作表

      const worksheet = XLSX.utils.aoa_to_sheet(worksheetData); // 创建工作簿

      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1"); // 导出 Excel 文件

      XLSX.writeFile(workbook, "表格导出.xlsx"); // 提示导出成功

      this.$message({
        type: "success",
        message: "导出成功！",
      });
    },
    // 编辑
    handleEdit(row, index) {
      console.log(index.id);
      this.$router.push({
        path: "/house/numAdd",
        query: {
          ids: index.id,
        },
      });
    },
  },
};
</script>
  <style scoped>
.top {
  width: 100%;
  overflow: hidden;
}
.top-fl {
  width: 100%;
  height: 40px;
  display: flex;
  /* justify-content: space-between;
    align-items: flex-start */
}
/* 使用深度选择器 */
::v-deep .el-table .has-gutter tr th {
  background: rgb(238, 241, 246);
  color: rgb(31, 45, 61);
  border-color: rgb(223, 230, 236);
  font-size: 14px;
  text-align: center;
}
.min {
  width: 100%;
}
.pagebox {
  margin-top: 10px;
  display: flex;
  justify-content: right;
}
.el-button--primary.is-plain,
.min>.el-button--primary {
  background-color: #ffffff00;
}
.min> .el-button--primary.is-plain:focus, .el-button--primary.is-plain:hover{
  color: #409EFF;
}
.min>.el-button--danger.is-plain:focus, .el-button--danger.is-plain:hover{
  color: #F56C6C;
}
/* .el-button--primary {
  background-color: #409eff;
  
} */
.el-button--danger.is-plain,
.min>.el-button--danger {
  background-color: #ffffff00;
}
/* .el-button--danger {
  background-color: #f56c6c;
} */
</style>